<template>
	<view>
		<view class="labels">
			<view class="">
				<h6>人才库</h6>
				<text class="all" @click="alltalents">查看更多 &gt;</text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(ele,index) in datalist" :key='index'>
					<view class="" @click="talentsclick(ele)">
						<image :src="ele.picUrl" mode=""></image>
						<view class="labelsname">
							{{ele.name}}
						</view>
						<view class="labelsexprience">
							{{ele.exprience}}

						</view>
						<view class="labelsexprience">
							{{ele.desc}}

						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="uni-common-pb"></view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				datalist: []
			}
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 跳转人才
			alltalents() {
				uni.switchTab({
					url: '/pages/talents/index'
				})
			},
			talentsclick(e){
				let detail = {
						author_name: e.name,
						cover: e.picUrl,
						id: e.id,
						published_at: e.desc,
						title: e.name,
						details: e.details
					};
					uni.navigateTo({
						url: '../talents/details?detailDate=' + JSON.stringify(detail)
					});
				}
			
			
		},

		async mounted() {
			let talentslist = await this.$api.json('talentslist');
			this.datalist = talentslist
		}
	}
</script>

<style scoped>
	.labelsexprience {
		font-size: 14px;
	}

	.labelsname {
		font-size: 14px;
	}

	.all {
		position: absolute;
		top: 12px;
		right: 10px;
		font-size: 14px;
		color: #999999;
	}

	h6 {
		margin: 10px 10px;
	}

	.labels {
		width: 100%;
		height: 250px;
		background: #fff;
		margin-top: 10px;
		overflow: hidden;
		position: relative;
	}

	image {
		width: 230px;
		height: 130px;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item {
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 230px;
		margin: 10px;
		text-align: center;
		font-size: 36rpx;
	}
</style>
